import React, { Component } from 'react'
import Header from 'components/header/Headerbar'
import Subject from '../subject/subject'
import search from 'assets/icon/search.png'
import menu from 'assets/icon/menu.png'
import Navs from '../../../components/navs/navs'
import Community from '../community/community'
import MoreList from '../morePages/morepageEntry'
import { Route, Switch, withRouter } from 'react-router-dom'


@withRouter
class sub extends Component {
    constructor() {
        super();
        this.state = {
            dir: '1',
            list: [],
            nav: false,
            type: []
        };
    }
    componentDidMount() {
        this.props.history.push('/index/subject');

    }
    
    render() {
        return (
            <div className="subCon" style={{
                height: '100%',
                position: 'relative',
                overflow: 'hidden'
            }}>
                <Header>
                    <ul className="head">
                        <li onClick={() => this.liClickHandler('1')}> <span className={this.state.dir === '1' ? 'active' : ''}>专题</span> </li>
                        <li onClick={() => this.liClickHandler('3')}> <span className={this.state.dir === '3' ? 'active' : ''}>资讯</span> </li>
                        <li onClick={() => this.liClickHandler('2')}> <span className={this.state.dir === '2' ? 'active' : ''}>社区</span> </li>
                    </ul>
                    <div className="search">
                        <div style={{
                            marginTop: "0.05rem"
                        }}>
                            <img src={search} onClick={this.searchHandleClick.bind(this)} />
                        </div>
                    </div>
                    <span style={{ margin: "0 0.15rem 0 0" }}>
                        <img src={menu} style={{ height: "0.2rem", width: "0.2rem" }} alt=""
                            onClick={() => this.navClickHandler('true')} />
                    </span>
                </Header>
                <Navs className=".clear_fix" show={this.state.nav}></Navs>
                <Switch>
                    <Route path="/index/subject" component={Subject}></Route>
                    <Route path="/index/community" component={Community}></Route>
                    <Route path="/index/more" component={MoreList}></Route>
                </Switch>

            </div>
        )
    }
    navClickHandler(prop) {
        this.state.nav = !this.state.nav
        this.setState({})
    }
    liClickHandler(num) {

        switch (num) {
            case '1':
                this.props.history.push('/index/subject');
                break;
            case '2':
                this.props.history.push('/index/community');
                break;
            case '3':
                this.props.history.push('/index/more');
                break;
            default:
                break;
        }
        this.setState({
            dir: num
        })
    }
    searchHandleClick() {
        this.props.history.push('/search')
    }
}
export default sub